<template>
    <div class="home">
        <!-- 当前navBar 实际存储在.home页中 => 通过固定定位 定位在头部 => 能不能将此元素放到 .app-header中 -->
        <!-- <van-nav-bar title="主页" :fixed="true"  placeholder  left-arrow 
        left-text="返回"
        right-text="搜索"
        /> -->

        <!-- <Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 -->

        <!-- 在需要头部导航的页面中 分别定义导航  tp到 .app-header -->
        <!-- <app-header a="1" b="2" class="home-nav" to=".app-header" title="首页" left-arrow left-text="返回">
            <template v-slot:title>
                11111
            </template>

            <template v-slot:left>
                2222
            </template>

            <template v-slot:right>
                3333
            </template>
        </app-header> -->

        <!-- 动态绑定 :[CurrentVue.__scopeId]="true"   => 将当前组件的scopeId作为属性传入-->
        <app-header class="home-nav" :[CurrentVue.__scopeId]="true" to=".app-header" right-text="登录" @click-left="leftHandler" @click-right="rightHandler">
            <template v-slot:left>
                <van-icon name="" />
            </template>

            <template v-slot:title>
                <van-search
                class="search"
                v-model="value"
                shape="round"
                background="#c82519"
                placeholder="请输入搜索关键词"
                />
            </template>
        </app-header>


        <!-- <teleport to='.app-header'>
            <van-nav-bar title="主页" :fixed="true"  placeholder  left-arrow 
            left-text="返回"
            right-text="搜索"
            />
        </teleport> -->

        <van-grid :column-num="5">
            <!-- <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" /> -->
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
            <van-grid-item icon="photo-o" text="文字">
                <template v-slot:icon>
                    <van-image
                        src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png"></van-image>
                </template>
                <template v-slot:text>
                    超市
                </template>
            </van-grid-item>
        </van-grid>

        <!-- v-model="refreshing"   => 默认为false,下拉之后会默认变为true,且触发@refresh事件 -> 等事件处理完毕需要将refreshing的值改为false -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!-- List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。 -->
            <van-list class="good-list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell class="list-item" v-for="item in list" :key="item.proid">
                    <router-link :to="{name:'detail',query:{proid:item.proid}}">
                        <img class="img" :src="item.img1" alt="">
                        <p class="goods-name van-multi-ellipsis--l2">{{ item.proname }}</p>
                        <p class="goods-price">{{ (item.originprice * item.discount) / 10 }}</p>
                    </router-link>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup>
import { showFailToast } from "vant";
import { ref, reactive, watchEffect } from "vue";
import { onMounted } from "vue";
import { getProListAPI } from "@/api/pro.js";
import AppHeader from '../../components/AppHeader.vue';
import CurrentVue from "./index.vue";

console.log(111,CurrentVue);

let pageParams = reactive({
    count: 1,
    limitNum: 10,
})

let list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

let getProList = async () => {
    try {
        var res = await getProListAPI(pageParams);
        console.log("商品列表请求成功", res);
        list.value.push(...res.data);
    } catch (err) {
        showFailToast(err.message);
    }
}


let stop = watchEffect(() => {
    getProList().then(() => {
        loading.value = false;
        refreshing.value = false;
        if (pageParams.count >= 15) {
            finished.value = true;
            stop();
        }
    })
})

let isFirst = ref(true);
let onLoad = () => {
    if(isFirst.value){  // isFirst == true  => 第一次
        isFirst.value = false;
        return false;
    }
    pageParams.count++;
    console.log("load被触发了", pageParams.count);
}

let onRefresh = () => {
    var page = Math.round(Math.random() * 13) + 1;
    console.log("下拉刷新", page,pageParams.count);
    if(page == pageParams.count){
        onRefresh();
        return false;
    }
    
    list.value = [];
    pageParams.count = page;
}

/* let onLoad = ()=>{
    console.log("load被触发了",pageParams.count);
    pageParams.count++;

    getProList().then(()=>{
        loading.value = false;
        if(pageParams.count >= 5){
            finished.value = true;
        }
    })
} */

    // onMounted(() => {
    //     getProList();
    // })

    let leftHandler = ()=>{
        alert(11111)
    }

    let rightHandler = ()=>{
        alert(22222)
    }



</script>

<style lang="scss" scoped>
.home{
    padding-bottom: 0.5rem;
}

.home-nav{
    background-color: #c82519;
}
:deep(.van-nav-bar__right .van-nav-bar__text){
    color: #fff;
}
.van-search{
    padding: 0;
}

.good-list {
    margin-top: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 8rem;

    .list-item {
        width: 49%;

        :deep(.van-cell__value) {
            text-align: left;
        }

        img {
            width: 80%;
            display: block;
            margin: 0.2rem auto;
        }

        .goods-name {
            font-size: 0.24rem;
        }
    }
}
</style>